<template>
    <div class="cart">
        <div class="top">
            <div>30天无忧退货</div>
            <div>48小时快速退款</div>
            <div>满88元免邮费</div>
        </div>
        <div class="list">
            <van-checkbox-group v-model="result">
                <van-swipe-cell  v-for="item in cartlist" :key="item.goods_id"  class="carlist">
                       <div class="item">
                            <div class="left">
                                <van-checkbox :name="item.goods_id" class="checkbox"/>
                            </div>
                            <div class="right">
                                <van-card
                                    :price="item.retail_price"
                                    :title="item.goods_name"
                                    class="goods-card"
                                    :thumb="item.list_pic_url"
                                /> 
                            </div>
                            <span class="num"> x {{item.number}}</span>
                       </div>
              
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button"  @click="deleteGoods(item.id)"/>
                    </template>
                </van-swipe-cell>
            </van-checkbox-group>
            <div class="btm">
                <van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="onSubmit">
                    <van-checkbox v-model="allChecked"  >全选</van-checkbox>
                </van-submit-bar>
            </div>
        </div>
        <van-popup v-model="isDetele">内容</van-popup>
    </div>
</template>

<script>

import {cartList,deleteAction} from "@/api/cart"
import Vue from 'vue';
import { Dialog, Toast } from 'vant';
import {submitAction} from '@/api/order'
export default {
    components: {
        [Dialog.Component.name]: Dialog.Component,
    },
    data() {
        return {
            cartlist:[],
            result:[],
            isDetele:false
        };
    },
    computed: {
        allChecked:{ 
            get(){
                if(this.cartlist.length==0){
                    return false
                }
                if(this.result.length==this.cartlist.length){
                    return true
                }else{
                    return false
                }
            } ,
            set(){
                if(this.result.length!=this.cartlist.length){
                    this.cartlist.forEach(el => {
                        if(!this.result.includes(el.goods_id)){
                            this.result.push(el.goods_id)
                        }
                    });
                }
                else{
                    this.result.splice(0)
                }

            }
        },
        totalPrice(){
            return this.cartlist.reduce((total,current)=>{
                if(this.result.includes(current.goods_id)){
                    return  total+current.number*current.retail_price
                }
                 else{
                     return total
                 }   
                  
            },0)
            
        }

    },
    created() {
        cartList({
            openId:localStorage.getItem('openId')
        }).then(res=>{
            console.log(res);
            this.cartlist=res.data
        })                
    },      
    mounted() {

    },
    methods: {


        onSubmit(){
            if(this.result.length==0){
                Toast("请添加商品");
                return
            }
            const data={
                allPrise:this.totalPrice,
                goodsId:this.result.join(),
                openId:localStorage.getItem('openId')
            }
            console.log(data);

            submitAction(data).then(res=>{
                console.log(res);
            })

            this.$router.push({path:'/order'})
        },
        deleteGoods(id){
            
            Dialog.confirm({
                message: '是否要删除商品',
                beforeClose,
            });
            var _this=this;
            function beforeClose(action, done) {
                    if (action === 'confirm') {
                         deleteAction({
                        id:id
                    })
                    .then(res=>{
                        console.log(res)
                    })
                    let index=_this.cartlist.findIndex(el=>{
                        el.id=id;
                    })

                    _this.cartlist.splice(index,1)
                        done()
                    } else {
                        done();
                    }
            }
                  
               
            }
           

        }

        

};
</script>

<style scoped lang="scss">
.cart{
    background-color: #fff;
    .top{
        display: flex;
        justify-content: space-between;
        padding: 15px 10px;
        background-color: #eee;

        div{
            background: url('./../../assets/images/point.png') no-repeat 0 center;
            background-size: 5px;
            padding-left: 7.5px;
            font-size: 15px;
            color: #666;
        }
    }
}
.item{
    display: flex;
    align-items: center;
    position: relative;

   .left{
       padding:0 20px;
   }

    .goods-card {
        height: 100px;
        padding: 0;
        margin: 0;
        background-color: #fff;

        .van-card__title{
            margin: 20px 0;
        }
        .van-card__bottom{
            text-align: left;
        }
        .van-card__price{
            margin-bottom: 20px;
           
        }
    }
    .num{
        position: absolute;
        top:50%;
        right: 20px;
        transform: translateY(-50%);
    }
}
.delete-button{
    height: 100px;
}

.carlist{
    height: 100px;
}
.btm{
   
    
    .van-submit-bar{
        bottom: 50px;
    }
}
</style>
